import { SmileOutlined, TableOutlined, PropertySafetyOutlined, MessageOutlined, CloudOutlined } from '@ant-design/icons';
import { Button, message, Popconfirm } from 'antd'
import styles from './index.module.scss'
import { User } from '@/modules/login';
import { useNavigate } from 'react-router-dom';
import { delUser, } from '../../features/user/userSlice'
import { logout } from '@/api/login';
import { useSelector, useDispatch } from 'react-redux'
import type { RootState } from '../../store/store'
export default function index() {
  const dispatch = useDispatch()
  const navigateTo = useNavigate()
  const user = useSelector((state: RootState) => state.user.user)
  const userinfo = JSON.parse(window.localStorage.getItem('user')!) as User
  async function userlogout() {
    console.log(user!.id);
    const res = await logout(user!.id)
    console.log(res);
    dispatch(delUser())
    navigateTo("/login")
  }


  /**
   * 
   * @param e 气泡确认
   */
  const confirm = (e: unknown) => {
    console.log(e);
    userlogout()
    message.success('千里不留行');
  };

  /**
 * 
 * @param e 气泡取消
 */
  const cancel = (e: unknown) => {
    console.log(e);
    message.error('哈~');
  };
  //去聊天
  function toChat() {
    navigateTo(`/home/${userinfo?.id}`)
  }

  //去好友列表
  function toFIandAll() {
    navigateTo(`/home/${userinfo?.id}/chat/allfiand`)
  }

  // //去钱包
  // function toMoney() {
  //   console.log("toMoney");
  // }

  // //去云
  // function toCloud() {
  //   console.log("toCloud");
  // }

  // //去哪里我也不知道
  // function toRandom() {
  //   console.log("toRandom");
  // }

  const userInfo = JSON.parse(window.localStorage.getItem('user')!) as User
  return (
    <div className={styles.left}>
      {/* 头像 */}
      <div className={styles.userimg}>
        <img className={styles.img} src={userInfo.headImg} alt="" />
      </div>
      {/* 图标群 */}
      <div className={styles.iconlist}>
        <div className={styles.icon}>
          <Button className={styles.iconbt} icon={
            <MessageOutlined onClick={toChat} style={{ fontSize: "35px" }} />}></Button>
        </div>
        <div className={styles.icon}>
          <Button className={styles.iconbt} icon={
            <SmileOutlined onClick={toFIandAll} style={{ fontSize: "35px" }} />}></Button>
        </div>

        <div className={styles.icon}>
          <Button className={styles.iconbt} icon={
            <CloudOutlined style={{ fontSize: "35px" }} />}></Button>
        </div>

        <div className={styles.icon}>
          <Button className={styles.iconbt} icon={
            <PropertySafetyOutlined style={{ fontSize: "35px" }} />}></Button>
        </div>
        <div className={styles.icon}>
          <Button className={styles.iconbt} icon={
            <TableOutlined style={{ fontSize: "35px" }} />}></Button>
        </div>
        {/* 图标群结束 */}
      </div>
      <Popconfirm
        title="雄霸天下"
        description="想归隐山林了吗?      "
        onConfirm={confirm}
        onCancel={cancel}
        okText="隐退~"
        cancelText="天下尽在我手"
      >
        <Button className={styles.logoutbt} type="primary" danger ghost>归隐山林</Button>
      </Popconfirm>

      {/* 左边结束 */}
    </div>

  )
}
